<template>
  <div />
</template>
<script>
import * as echarts from 'echarts'
import { getHtmlFontPX } from '@/utils/base'
/**
 * 图表业务组件
 * @module echartsBar
 *
 */
export default {
  name: 'EchartsBar',
  props: {
    chart: {
      type: Object
    }
  },
  watch: {
    chart(val) {
      if (val) {
        this.setChart()
      }
    }
  },
  methods: {
    setChart() {
      const self = this
      const seriesObj = {
        type: 'bar',
        barMaxWidth: self.$parent.barMaxWidth,
        itemStyle: {
          barBorderRadius: self.$parent.barBorderRadius // 圆角（左上、右上、右下、左下）
        }
      }
      this.chart.setOption({
        title: {
          text: this.$parent.title,
          top: '1%',
          left: 'center'
        },
        legend: {
          show: this.$parent.showLegend || false,
          ...this.$parent.legend
        },
        color: this.$parent.colorList.map((item) => {
          return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: item.c1 || ''
            },
            {
              offset: 1,
              color: item.c2 || ''
            }
          ])
        }),
        tooltip: {
          show: true,
          trigger: this.$parent.tooltip || 'item',
          axisPointer: {
            type: 'line'
          },
          backgroundColor: this.$parent.tooltipBackgroundColor, // 设置背景颜色
          borderColor: 'transparent',
          borderWidth: 0,
          textStyle: {
            color: this.$parent.tooltipFontColor,
            fontSize: getHtmlFontPX(this.fontSize)
          },
          ...this.$parent.tooltip
        },
        grid: {
          top: this.$parent.top,
          right: this.$parent.right,
          left: this.$parent.left,
          bottom: this.$parent.bottom,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.$parent.echartsData.xAxisData || [],
          // x轴文字
          axisLabel: {
            textStyle: {
              color: this.$parent.axisLabelColor,
              fontSize: getHtmlFontPX(this.$parent.fontSize)
            },
            rotate: this.$parent.rotate,
            margin: this.$parent.axisLabelMargin
          },
          // x轴
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: this.$parent.axisLineColor
            }
          },
          // x轴刻度
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // y轴 文字
          axisLabel: {
            textStyle: {
              fontSize: getHtmlFontPX(this.$parent.fontSize),
              color: this.$parent.axisLabelColor
            }
          },
          // y轴
          axisLine: {
            show: false
          },
          // y轴横向 标线
          splitLine: {
            show: false
          }
        },
        series: this.$parent.echartsData.seriesData.map((item) => {
          return {
            name: item.name || '',
            data: item.value || [],
            ...seriesObj
          }
        })
      })
      this.$emit('setUpdate', this.chart)
    }
  }
}
</script>
